<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html>
  <head>
    <title>海康云盘系统</title>
    <link rel="stylesheet" href="css/poposlides.css">
    <link rel="stylesheet" href="css/layout.css">
    <script src="js/jquery-2.1.4.min.js" ></script>
    <script>
     	//这里写一些页面加载的时候要做的事
    	$(function(){
    	   	initTrEvent();
    	})
    	
    	//下面是声明一个javacript函数
    	function initTrEvent(){
    		//.给选中的元素加一个鼠标滑过的事件
    		$("#center_table tr").mouseover(function(){
    				//给当前元素加一个样式 
	    			$(this).addClass("highlightTd");
	    			//给当前元素的兄弟元素去掉一个样式
	    			$(this).siblings().removeClass("highlightTd");
	    			
	    			//控制某些元素的显示和隐藏
	    			$(this).find("div").show(); //显示出分享,下载,删除
	    			$(this).siblings().find("div").hide();
    		});
    	}
     	
    	function getSubFiles(parent){
    		window.location.href="HdfsServlet?flag=managerSubFile&parent="+encodeURI(parent);
    	}
    	
    	function downloadFile(url){
    	 	   window.location.href="  HdfsServlet?flag=download&fileName="+encodeURI(url);
       }
    	
    	function uploadFile(){
     		$("#img1").show();
     		document.form1.submit();
     }
    	
    	function deleteFile(url){
    		if(confirm("确定要删除吗")){
    			window.location.href="HdfsServlet?flag=delete&fileName="+encodeURI(url);
    		}	
   		}
    	
    	function createNewTr(){
    		var innerTR=
    		"<tr>"+
    		"<td><img src='images/fileIcons/folder.png' /> <input id='txtFolderName'  value='请输入文件夹名称'><button class='newrow-btn' onclick='mkDir()'>√</button><button  class='newrow-btn'  onclick='cancleCreateDir(this)'>X</button>   </td><td>b</td><td>c</td><td>d</td>";
    		"</tr>";
    		$("#center_table").prepend(innerTR);
    		document.getElementById("txtFolderName").select();
    	}
    	
    	function mkDir(){
			var parent=encodeURI($("#parent").val());
			
			var folderName=encodeURI($("#txtFolderName").val());
			window.location.href="HdfsServlet?flag=createFolder&parent="+parent+"&forderName="+folderName;
		}
		
		function cancleCreateDir(btn){
			$(btn).parent().parent().remove();
		}
		    	
      </script>
  </head>
      
  <body>
  <img id="img1" style="display:none" src="images/processing.gif" /> 
  <form style="display:none" name="form1" action="HdfsServlet?flag=upload" method="post" enctype="multipart/form-data">
       <input name="parent" id="parent" value="${param.parent==null?parent:param.parent}" >
   		 <input type="file" id="file1" name="file1" onchange="uploadFile()" >
   </form>
   <div class="frame-center">
            <div class="frame-nav">
                <div class="centerLeft">
                     <a  onclick="document.getElementById('file1').click()" class="active"><img src="images/upload.png"  />上传</a>
                    <a onclick="createNewTr()"><img src="images/createfolder.png"/>新建文件夹</a>
                    <a><img src="images/download.png" />离线下载</a>
                    <a><img src="images/machine.png" />我的设备</a>
                </div>
                <div class="centerRight"> 
        			
			   	<form id="form1" action="HdfsServlet?flag=search" method="post">
			       <p>
			           <input   name="fileName" placeholder="搜素你的文件" value="${param.fileName }">
			           <img onclick="$('#form1').submit()" src="images/search.png"  title="搜索"  />
			       </p>
			       <img src="images/menu1.png">
			       <img src="images/menu2.png"> 
			      </form>     
			   </div>
            </div>
                
            <div class="frame-title">
        	   <span>   
		    <a href="HdfsServlet?flag=manager"> 全部文件  | </a>
		    <c:forEach var="url" items="${urlList }">
		     	   <a onclick='getSubFiles("${fn:split( url ,"_")[0]  }")' >  &gt; ${fn:split( url ,"_")[1]} </a>
	      </c:forEach>
  	  </span>
              	<span>
		  		已全部加载，共  <label>${fn:length(hdfsFileList) } </label>个
	  			</span>    
            </div>
           
            <div class="tab">
                <table>  
                    <tr>
                        <td><input type="checkbox">文件名</td>
                        <td></td>
                        <td>大小</td>
                        <td>修改日期</td>
                    </tr>
                </table>
                
                <div class="datas">
	                <table id="center_table">	
            	<c:forEach var="f" items="${hdfsFileList}">
            	 <tr class="highlightTd">
            	    <td>
            	       &nbsp; <input type="checkbox"><img src="images/fileIcons/${f.icon} ">
            	        <label   <c:if test="${f.directory==true }" >onclick="getSubFiles('${f.realPath }')" </c:if> >${f.path }</label>
            	     </td>
            	      <td >
            	        <div style="displqy:inline-block">
            	        	<a><img src="images/a.png" title="分享"  /></a> 
            	            <a href="javascript:void(0)" onclick="downloadFile('${f.realPath }')"><img src="images/b.png"  title="下载"  /></a>   
            	             <a onclick="deleteFile('${f.realPath }')"><img src="images/c.png"  title="删除"  /></a>
            	         </div>
            	      </td>
                    <td>${f.len }</td>
                    <td>${f.modifcationTime }</td>
                 </tr>
                 </c:forEach>

           		 </table>
                </div>
            </div>
        </div>
        
        <script >
         var s= "${msg}"
         if(s!="")
        	 alert(s);
        </script>
        
        <script>
        ${refreshScript}
        </script>
  </body>
</html>